<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="css/empcss.css"/>
		<link rel="stylesheet" type="text/css" href="css/compatible.css"/>
		<script type="text/javascript">
			var setData = {date_type:"date", date:"today"};
		</script>
	</head>
	
	<body>
		<header class="mui-bar mui-bar-nav hbg ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">优惠券统计</h1>
		</header>
		<div class="mui-content">
		    
	
		<main id="content">
			<section class="mui-content financial-tab text-center" data-url='/api/coupon/census'>
				<ul class="mui-row">
					<li class="mui-col-xs-6" onclick="tab(event, storeChange)"> <!--onclick="tab(event, paytype)"-->
						<p>门店</p>
						<div class="financial-subtab curStore" data-store="">
							<!-- <span data-name="all">全部途径</span>
							<span data-name="普通支付">普通支付</span>
							<span data-name="现金支付">现金支付</span>
							<span data-name="移动支付">移动支付</span>
							<span data-name="微信支付">微信支付</span>
							<span data-name="支付宝支付">支付宝支付</span>
							<span data-name="其它">其它</span> -->
						</div>
					</li>
					<li class="mui-col-xs-6" onclick="tab(event, changeDate)">
						<p>今日</p>
						<div class="financial-subtab">
							<span data-type="date" data-date="today">今天</span>
							<span data-type="date" data-date="yesterday">昨天</span>
							<span data-type="custom" data-date="week">本周</span>
							<span data-type="custom" data-date="month">本月</span>
							<span class="none" onclick="timeStep(event)">时间段</span>
						</div>
					</li>
				</ul>
			</section>
			<section class="main-title container border"><img src="http://placehold.it/38x38" alt="" /><span>优惠券排行</span></section>
			<div class="container text-center salesvolume">
				<div class="mui-row coupon-btn">
					<div class="mui-col-xs-6 active" data-type="send">发送数</div>
					<div class="mui-col-xs-6" data-type="use">核销数</div>
				</div>
			</div>
			<div id="analysis" style="height: 400px; width: 100%;"></div>
			
			<section class="main-title container border clear">
				<img src="http://placehold.it/38x38" alt="" /><span>优惠券走势分析</span>
			</section>
			
			<div id="trend" class="" style="height: 300px"></div>
			
			<section class="table container text-center profit-table table-col-3"></section>

			<div id="popover" class="mui-popover">
				<div class="listdiv">
					<div class="mui-input-row borbot" >
						<label>开始时间:</label>
						<div class="place items">
							<button id='starttime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
						<div class="place items">
							<button id='endtime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
				</div>
			</div>
		</main>
			</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/echarts.js"></script>
	<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/commont.js"></script>
	<script type="text/javascript">
		//mui.init()
		var data_store = {}
		var coupon_type = 'send'
		var analysis = document.getElementById("analysis");
		var myChart = echarts.init(analysis);

		var trend = document.getElementById("trend");
		var myChart2 = echarts.init(trend);

		function fn1(_data) {

			var coupon_name = []
			var count = []
			var use_count = []
			
			if(_data.length > 0){
				_data.forEach(function (cur, index, array){
					coupon_name.push(cur['coupon_name'])
					count.push(cur['count'])
					use_count.push(cur['use_count'])
				})
			}

			if(coupon_type == 'send'){
				var d = {
					type: 'bar',
					name : '发送数',
					data: count,
					barMaxWidth :40,
					barGap : '2%',
					itemStyle : {
						color : '#4174D6'
					}
				}
			}else{
				var d = {
					type: 'bar',
					name : '核销数',
					data: use_count,
					barMaxWidth :40,
					barGap : '2%',
					itemStyle : {
						color : '#5185E7'
					}
				}
			}

			//console.log(_data)

			var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
			   
				grid: {
					left: '3%',
					right: '4%',
					top: '5%',
					bottom : '3%',
					containLabel: true
				},
				
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: coupon_name,
					axisLabel : {
						formatter: function (name, index){
							var newText = name;
							if(name.length > 4){
								var textArray = name.split('')
								textArray.splice(4, 0, '\n')
								
								newText = textArray.join('')
								
							}
							return newText
						}
					},
				},
				// itemStyle : {
				// 	color : '#4174D6'
				// },
				series: [d]
			};
			
			return option;
		}
		
		
		function fn2(_data){
			var send = []
			var use = []
			var time = []
			
			if(_data.length > 0){
				_data.forEach(function (cur, index, array){
					send.push(cur['send_count'] || 0)
					use.push(cur['use_count'] || 0)
					time.push(cur['time'].slice(5))
				})
			}

			//console.log(send, use, time)

			var option = {
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend :{
			    	data : ['发送数', '核销数'],
			    	left : 'center',
			    	bottom : 20
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        top: '5%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: time
			    },
			    yAxis: {
			        type: 'value'
			    },
				series: [
			        {
			            name:'发送数',
			            type:'line',
			           // stack: '总量',
			            data:send
			        },
			        {
			            name:'核销数',
			            type:'line',
			            //stack: '总量',
			            data:use
			        }
			    ]
			};

			if(_data.length > 8){
				option['dataZoom'] = [{
					type: 'inside',
					show: true, //flase直接隐藏图形
					xAxisIndex: [0],
					left: '9%', //滚动条靠左侧的百分比
					bottom: -5,
					start: 0,//滚动条的起始位置
					end: 60 ,//滚动条的截止位置（按比例分割你的柱状图x轴长度）
				}]
			}
			
			return option
		}

		function requireData(_data){
			var store = $('.curStore').data('store');
			if(!!store){
				_data['data']['store_id'] = store
			}else{
				delete _data['data']['store_id']
			}
			_data['data'].access_token = acctoken()

			if(_data.data['date_type'] == 'date'){
				$('.singleday').hide()
			}else{
				$('.singleday').show()
			}

			ajax(_data, function (res){
				var data = res.data;

				data_store = data;

				var html = ['<div class="table-th"><span class="table-td">时间</span><span class="table-td">发送数(张)</span><span class="table-td">核销数(张)</span></div>']

				var coupon = concat(data['send_count'], data['use_count'], 'time');
				
				coupon.forEach(function(cur, index){
					var tpl =
						`<div class="table-tr">
							<span class="table-td">${cur['time'].slice(5)}</span>
							<span class="table-td">${cur['send_count'] || 0}</span>
							<span class="table-td">${cur['use_count'] || 0}</span>
						</div>`;
					html.push(tpl)
				})
				
				html.push(`<div class="table-th"><span class="table-td"><b>合计</b></span><span class="table-td"><b>${data['send_count_all']}</b></span><span class="table-td"><b>${data['use_count_all']}</b></span></div>`)

				$('.table').html(html.join(''));


				setEcharts(myChart, data['group'], fn1)
				setEcharts(myChart2, coupon, fn2);
			})

		}

		
		
		$(function (){
			requireData({
				url : '/api/coupon/census',
				data : {
					date_type : 'date',
					date : 'tody'
				}
			})

			$('.coupon-btn').tab({
				children : 'div',
				curClass : 'active',
				callback : function (_sub, _index){
					var type = _sub.data('type')
					coupon_type = type

					setEcharts(myChart, data_store['group'], fn1)

				}
			})
		})
		
		
		
		window.addEventListener("resize", function (){
			myChart.resize();
			myChart2.resize();
		});
	</script>
</html>
